<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <link rel="shortcut icon" href="newtemplatesfiles5/img/favicon.html">

      <link rel="stylesheet" href="asserts/css/swiper-bundle.min.css">


      <title>学生首页</title>

    <!-- Bootstrap core CSS -->
    <link href="newtemplatesfiles5/css/bootstrap.min.css" rel="stylesheet">
    <link href="newtemplatesfiles5/css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="newtemplatesfiles5/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href="newtemplatesfiles5/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>
    <link rel="stylesheet" href="newtemplatesfiles5/css/owl.carousel.css" type="text/css">
    <!-- Custom styles for this template -->
    <link href="newtemplatesfiles5/css/style.css" rel="stylesheet">
    <link href="newtemplatesfiles5/css/style-responsive.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
      <script src="newtemplatesfiles5/js/html5shiv.js"></script>
      <script src="newtemplatesfiles5/js/respond.min.js"></script>
    <![endif]-->

      <!--弹出框style-->
      <style>
          /*弹出层*/
          #popBox {
              display: none;
              background-color: black;
              z-index: 11;
              width: 500px;
              height: 500px;
              position:fixed;
              top:0;
              right:0;
              left:0;
              bottom:0;
              margin:auto;
          }

          #popBox .close{
              text-align: right;
              margin-right: 5px;
              background-color: #F8F8F8;
          }

          /*关闭按钮*/
          #popBox .close a {
              text-decoration: none;
              color: red;
          }

          #popBox .auto {
              margin-left: 50px;
              margin-right: 50px;
              margin-top: 50px;

          }

      </style>

  </head>

  <body>

  <section id="container" class="">
      <!--header start-->
      <div th:insert="common/student-common-header::top"></div>
      <!--header end-->
      <!--sidebar start-->
      <div th:insert="common/student-common-sidebar::#left"></div>
      <!--sidebar end-->
      <!--main content start-->
      <section id="main-content">
          <section class="wrapper">
              <!--state overview start-->
              <div class="row state-overview">
                  <div class="col-lg-4 col-sm-8">
                      <section class="panel">
                          <a href="#" onclick="popAndshibie()">
                              <div class="symbol red">
                                  <i class="icon-check-minus"></i>
                              </div>
                              <div class="value">
                                  <h1>扫一扫</h1>
                              </div>
                          </a>
                          <div id="popBox">
                              <div class="close">
                                  <a href="javascript:void(0)" onclick="closeBox()">关闭</a>
                              </div>
                              <div class="auto">
                                  <video id="video" width="400" height="400" autoplay></video>
                                  <canvas id="canvas" width="400" height="400" style="display: none;"></canvas>
                              </div>
                              <button id="jixuScan" class="btn btn-danger" style="display: none;" onclick="jixuScan()">开始扫描</button>
                          </div>
                          <!--弹出框js-->
                          <script>

                              function jixuScan(){
                                  shibie();
                              }

                              document.getElementById("video").onplaying=function(){
                                  console.log("canvas  change");
                                  //shibie();
                                  document.getElementById("jixuScan").style.display="block";
                              }

                              function popAndshibie(){
                                  open();
                                  popBox();
                              }

                              /*点击弹出按钮*/
                              function popBox() {
                                  var popBox = document.getElementById("popBox");
                                  popBox.style.display = "block";
                              };

                              /*点击关闭按钮*/
                              function closeBox() {
                                  var popBox = document.getElementById("popBox");
                                  popBox.style.display = "none";
                                  document.getElementById("jixuScan").style.display="none";
                              }
                          </script>

                      </section>
                  </div>
                  <div class="col-lg-4 col-sm-8">
                      <section class="panel">
                          <div class="symbol blue">
                              <i class="icon-bar-chart"></i>
                          </div>
                          <div class="value">
                              <h1 th:text="${session.superviseFormNum eq null ? '' : session.superviseFormNum}">34,500</h1>
                              <p>累计被举报数量</p>
                          </div>
                      </section>
                  </div>
                  <div class="col-lg-4 col-sm-8">
                      <section class="panel">
                          <div class="symbol yellow">
                              <i class="icon-shopping-cart"></i>
                          </div>
                          <div class="value">
                              <h1 th:text="${session.ebickGoodsNum eq null ? '' : session.ebickGoodsNum}">345</h1>
                              <p>全校累计成交数量</p>
                          </div>
                      </section>
                  </div>

              </div>
              <!--state overview end-->
              <div class="row">
                  <div class="col-lg-7">
                      <div class="border-head">
                          <h3>最新公告</h3>
                      </div>
                      <div class="swiper">
                          <div class="swiper-wrapper text-center" >
                              <tr th:each="emp:${session.publicizeImplList3}">
                                  <div class="swiper-slide">
                                      <a th:href="@{/getOnePublicize.do(publicizeID=${emp.publicizeID})}">
                                          <span th:text="${emp.title eq null ? '无':emp.title}"></span><br>
                                          <img style="width: 100%" th:src="${emp.image eq null ? '' :emp.image}">
                                      </a>
                                  </div>
                              </tr>

                          </div>
                          <!-- 如果需要分页器 -->
                          <div class="swiper-pagination"></div>

                          <!-- 如果需要导航按钮 -->
                          <div class="swiper-button-prev"></div>
                          <div class="swiper-button-next"></div>

                          <!-- 如果需要滚动条 -->
                          <div class="swiper-scrollbar"></div>
                      </div>

                  </div>

                  <div class="col-lg-5">
                      <!--widget start-->
                      <div class="border-head">
                          <h3>行驶证</h3>
                      </div>
                      <section class="panel">
                          <div class="twt-feed blue-bg">
                              <h1>我的电动车行驶证</h1>
                              <p id="drivingLicenseID" th:text="${session.drivingLicenseImpl eq null ?
                              session.getDrivingLicenseMessage:session.drivingLicenseImpl.drivingLicenseID}">jsmith@flatlab.com</p>
                              <a href="#">
                                  <img th:src="${session.drivingLicenseImpl eq null ? 'asserts/img/YSU.jpg':session.drivingLicenseImpl.image}" alt="">
                              </a>
                          </div>
                          <br><br>
                          <div class="panel-body bio-graph-info">
                              <div class="row">
                                  <div class="bio-row">
                                      <label>姓名 :</label><a th:text="${session.drivingLicenseImpl eq null ? '':session.drivingLicenseImpl.studentName}"> Jonathan</a>
                                  </div>
                                  <div class="bio-row">
                                      <label>学号 :</label><a th:text="${session.drivingLicenseImpl eq null ? '':session.drivingLicenseImpl.studentID}"> Jonathan</a>
                                  </div>
                                  <div class="bio-row">
                                      <label>学院 :</label><a th:text="${session.drivingLicenseImpl eq null ? '':session.drivingLicenseImpl.department}"> Smith</a>
                                  </div>
                                  <div class="bio-row">
                                      <label>审批人 :</label><a th:text="${session.drivingLicenseImpl eq null ? '':session.drivingLicenseImpl.approverName}"> Smith</a>
                                  </div>
                                  <div class="bio-row">
                                      <label>车牌号 :</label><a th:text="${session.drivingLicenseImpl eq null ? '':session.drivingLicenseImpl.ebickID}"> UI Designer</a>
                                  </div>
                                  <div class="bio-row">
                                      <label>品牌 :</label><a th:text="${session.drivingLicenseImpl eq null ? '':session.drivingLicenseImpl.brand}"> Australia</a>
                                  </div>
                                  <div class="bio-row">
                                      <label>状态 :</label><a th:text="${session.drivingLicenseImpl eq null ? '':session.drivingLicenseImpl.status}"> UI Designer</a>
                                  </div>
                                  <div class="bio-row">
                                      <label>生效时间 :</label><a th:text="${session.drivingLicenseImpl eq null ? '':session.drivingLicenseImpl.generateTime}"> 13 July 1983</a>
                                  </div>
                              </div>

                          </div>

                      </section>
                      <!--widget end-->
                  </div>
              </div>
              <div class="row">
                  <div class="col-lg-7">
                      <div class="border-head">
                          <h3>最新的被举报</h3>
                      </div>
                       <div class="row">
                              <section class="panel">
                                  <div class="panel-body bio-graph-info" >
                                      <div class="row" >
                                          <div class="bio-row">
                                              <label>举报单号 :</label>
                                              <a th:text="${session.superviseFormList eq null ? '没有被举报' :session.superviseFormList.get(0).superviseID}"></a>
                                          </div>
                                          <div class="bio-row">
                                              <label>被举报电动车牌照 :</label>
                                              <a th:text="${session.superviseFormList eq null ? '' :session.superviseFormList.get(0).ebickID}"></a>
                                          </div>
                                          <div class="bio-row">
                                              <label>日期 :</label>
                                              <a th:text="${session.superviseFormList eq null ? '' :session.superviseFormList.get(0).dateandtime}"></a>
                                          </div>
                                          <div class="bio-row">
                                              <label>类型 :</label>
                                              <a th:text="${session.superviseFormList eq null ? '' :session.superviseFormList.get(0).superviseType}"></a>
                                          </div>
                                          <div class="bio-row">
                                              <label>详情 :</label>
                                              <a th:text="${session.superviseFormList eq null ? '' :session.superviseFormList.get(0).details}"></a>
                                          </div>
                                          <div class="bio-row">
                                              <label>状态 :</label>
                                              <a th:text="${session.superviseFormList eq null ? '' :session.superviseFormList.get(0).status}"></a>
                                          </div>
                                          <div class="bio-row">
                                              <label>图片 :</label>
                                              <img style="width: 60px" th:src="${session.superviseFormList eq null ? '':session.superviseFormList.get(0).image}">
                                          </div>
                                      </div>
                                  </div>
                              </section>
                      </div>
                  </div>
                  <div class=" col-lg-5">
                      <div class="border-head">
                          <h3>我的钱包</h3>
                      </div>
                      <div class="weather-bg">
                          <div class="panel-body">
                              <div class="row">
                                  <div class="col-lg-12">
                                      <i class="icon-jpy"></i>
                                      <h2>钱包余额</h2>
                                  </div><br>
                                  <div class="col-lg-12">
                                      <div class="degree">
                                          <a style="color: white" th:text="${session.myWallet eq null ? '没有开通钱包功能' : session.myWallet.amount}">0.00</a>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>


              </div>
              <div class="row">

                  <div class="profile-info col-lg-12">

                      <div class="border-head">
                          <h3>最近发布新电动车</h3>
                      </div>
                      <tr th:each="emp:${session.allEbickGoodsImplList}">

                          <div class="panel-body">
                              <!--ebickgoods info start-->
                              <section class="panel post-wrap pro-box">
                                  <div class="col-lg-5">
                                      <div class="post-info">
                                          <div class="panel-body">
                                              <div class="col-lg-6">
                                                  <h1><img alt="" style="width: 40px" th:src="${emp.student.image}">
                                                      <span th:text="${emp.student.nickName}"></span></h1>
                                                  <a th:text="${emp.ebickGoods.releaseTime}"></a>
                                              </div>
                                              <div class="col-lg-6">
                                                  <h2><a class="ebickID" th:text="${emp.ebickGoods.ebickID}"></a></h2>
                                                  <p>首次注册时间: <a th:text="${emp.ebick.firstRegistTime}"></a></p>
                                              </div>
                                              <br>
                                              <div class="desk yellow">
                                                  <h3>
                                                      品牌：<a th:text="${emp.ebick.brand}"></a><br><br>
                                                      <td th:each="label:${emp.labelsList}">
                                                          <a th:text="${label}"></a>
                                                      </td>
                                                  </h3>
                                                  <p><a th:text="${emp.ebickGoods.details}"></a></p>
                                                  <br>
                                                  <h1><i class="icon-jpy"></i>
                                                      <a th:text="${emp.ebickGoods.price}" ></a>元</h1>
                                              </div>
                                              <br>
                                              <div>
                                                  <a>
                                                      <button id="toCancel" class="btn btn-sm btn-danger" onclick="toWriteReason(this)">购买</button>
                                                  </a>
                                                  <a>
                                                      <button class="btn btn-info" onclick="getQRcode(this)"><i class="icon-qrcode"></i>&nbsp;查看二维码</button>
                                                  </a>
                                              </div>
                                              <div class="col-lg-12">
                                                  <!--隐藏   注销理由   注销时显示-->
                                                  <section style="display: none" th:name="toWriteReasonSection">
                                                      <div class="panel-body">
                                                          <form class="form-horizontal" role="form">
                                                              <input  id="ebickIDHidden"  name="ebickID" type="text" class="form-control"
                                                                      th:value="${emp.ebickGoods.ebickID}" style="visibility: hidden">
                                                              <div class="form-group">
                                                                  <label>订单备注：(卖家同意后交易成功)</label>
                                                                  <div >
                                                                      <input name="details" type="text" class="form-control"  placeholder="卖家可以看到，认真填写更容易成交哦！" >
                                                                      <a th:text="请填写订单备注" style="color: red;visibility: hidden"></a>
                                                                  </div>
                                                              </div>
                                                          </form>
                                                          <div class="form-group">
                                                              <button type="submit" class="btn btn-danger" onclick="submitOrder(this)">提交订单</button>
                                                              <button type="submit" class="btn btn-info" onclick="cancelOperation(this)">取消操作</button>
                                                          </div>
                                                      </div>
                                                  </section>
                                                  <script>
                                                      function cancelOperation(obj) {

                                                          var toWriteReasonSection = obj.parentElement.parentElement.parentElement;
                                                          //toWriteReasonSection.style.visibility="hidden";
                                                          toWriteReasonSection.style.display="none";
                                                          var areason = toWriteReasonSection.getElementsByTagName("a")[0];
                                                          //areason.style.visibility="hidden";
                                                          areason.style.display="none";
                                                          console.log("cancelOperation "+toWriteReasonSection.getAttribute("style"));
                                                      }
                                                      function toWriteReason(obj) {
                                                          console.log("toWriteReason");
                                                          var toWriteReasonSection = obj.parentElement.parentElement.parentElement.getElementsByTagName("section")[0];
                                                          //toWriteReasonSection.style.visibility="visible";
                                                          toWriteReasonSection.style.display="block";
                                                          console.log(toWriteReasonSection.getAttribute("style"));

                                                      }
                                                      function submitOrder(obj) {
                                                          var toWriteReasonSection = obj.parentElement.parentElement.parentElement;
                                                          var areason = toWriteReasonSection.getElementsByTagName("a")[0];
                                                          var reason = toWriteReasonSection.getElementsByTagName("input")[1].value;
                                                          console.log(reason.length);
                                                          if(reason.length<5){
                                                              console.log("请填写订单备注");
                                                              //areason.style.visibility="visible";
                                                              areason.style.display="block";
                                                              alert("请填写订单备注,至少5个字");
                                                          }else{
                                                              areason.style.visibility="hidden";
                                                              alert("确定提交订单吗？");
                                                              var form = new FormData(toWriteReasonSection.getElementsByTagName("form")[0]);
                                                              console.log(form);
                                                              $.ajax({
                                                                  url:"student-submitOrder.do",
                                                                  type:"post",
                                                                  dataType:"html",
                                                                  data:form,
                                                                  cache:false,
                                                                  processData:false,
                                                                  contentType:false,
                                                                  success: function (data) {
                                                                      console.log(data);
                                                                      if(data!="success"){
                                                                          alert(data);
                                                                      }else{
                                                                          alert("提交成功，等待卖家确认哦！");
                                                                          location.href="";
                                                                      }
                                                                  },
                                                                  error:function (data) {
                                                                      alert("提交失败");
                                                                      console.log("error");
                                                                  }
                                                              })
                                                          }



                                                      };
                                                  </script>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-lg-7" style="margin-top: 20px">

                                      <div class="swiper col-lg-12 post-highlight yellow v-align">
                                          <div class="swiper-wrapper">
                                              <td th:each="image:${emp.imagesList}">
                                                  <div class="swiper-slide">
                                                      <img style=" height: 100%;
                                                                             width: 100%;
                                                                                min-width: 500px;
                                                                                 min-height: 500px;" th:src="${image}">
                                                  </div>
                                              </td>
                                          </div>
                                          <div class="swiper-pagination"></div>
                                          <div class="swiper-button-prev"></div>
                                          <div class="swiper-button-next"></div>
                                          <div class="swiper-scrollbar"></div>
                                      </div>

                                  </div>
                              </section>
                          </div>

                      </tr>


                  </div>
              </div>

          </section>
      </section>
      <!--main content end-->
  </section>

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="newtemplatesfiles5/js/jquery.js"></script>
    <script src="newtemplatesfiles5/js/jquery-1.8.3.min.js"></script>
    <script src="newtemplatesfiles5/js/bootstrap.min.js"></script>
    <script src="newtemplatesfiles5/js/jquery.scrollTo.min.js"></script>
    <script src="newtemplatesfiles5/js/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="newtemplatesfiles5/js/jquery.sparkline.js" type="text/javascript"></script>
    <script src="newtemplatesfiles5/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
    <script src="newtemplatesfiles5/js/owl.carousel.js" ></script>
    <script src="newtemplatesfiles5/js/jquery.customSelect.min.js" ></script>

    <!--common script for all pages-->
    <script src="newtemplatesfiles5/js/common-scripts.js"></script>

    <!--script for this page-->
    <script src="newtemplatesfiles5/js/sparkline-chart.js"></script>
    <script src="newtemplatesfiles5/js/easy-pie-chart.js"></script>
  <!--swiper js-->
  <script src="js/swiper-bundle.min.js"> </script>


  <!--scan js-->
  <script>
      var file ,stream;
      //访问用户媒体设备的兼容方法
      function getUserMedia(constraints, success, error) {
          if (navigator.mediaDevices.getUserMedia) {
              //最新的标准API
              navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
          } else if (navigator.webkitGetUserMedia) {
              //webkit核心浏览器
              navigator.webkitGetUserMedia(constraints,success, error)
          } else if (navigator.mozGetUserMedia) {
              //firfox浏览器
              navigator.mozGetUserMedia(constraints, success, error);
          } else if (navigator.getUserMedia) {
              //旧版API
              navigator.getUserMedia(constraints, success, error);
          }
      }

      let video = document.getElementById('video');
      let canvas = document.getElementById('canvas');
      let context = canvas.getContext('2d');

      function success(stream) {
          //兼容webkit核心浏览器
          let CompatibleURL = window.URL || window.webkitURL;
          //将视频流设置为video元素的源
          console.log(stream);
          stream = stream;
          //video.src = CompatibleURL.createObjectURL(stream);
          video.srcObject = stream;
          video.play();
      }

      function error(error) {
          console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
      }

      function open(){
          if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
              //调用用户媒体设备, 访问摄像头
              getUserMedia({video : {width: 400, height: 400}}, success, error);
          } else {
              alert('不支持访问用户媒体');
          }
      }
      // base64转文件

      function shibie(){
          var res;
          for(var i = 0 ; i < 5 ; i++){
              getAImage();
              res =submicQR();
              //alert();
              if(res != "error"){
                  break;
              }
              var now = new Date();
              var newnow=new Date();
              console.log(now);
              console.log(newnow)
              while(newnow < now + 3000){
                  newnow  = new Date();
                  console.log("new  "+newnow)
              }
          }
          if(res != "error"){
              alert("识别成功");
              //alert(res);
              location.href="scan-getOneEbick.do?ebickID="+res;
          }else{
              alert("扫描失败");
          }

      }

      function getAImage() {

          context.drawImage(video, 0, 0, 480, 320);
          // 获取图片base64链接
          var image = canvas.toDataURL('image/png');

          //将图片添加到页面中
          //document.body.appendChild(img);
          function dataURLtoFile(dataurl, filename) {
              var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                  bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
              while (n--) {
                  u8arr[n] = bstr.charCodeAt(n);
              }
              file = new File([u8arr], filename, {type: mime});
              return new File([u8arr], filename, {type: mime});
          }
          console.log(dataURLtoFile(image, 'aa.png'));
      }

      function submicQR(){
          var formData = new FormData();
          formData.append("qrcode",file);
          var res = "error";
          $.ajax({
              type: "POST", // 数据提交类型
              url: "decode-qrcode.do", // 发送地址
              data: formData, //发送数据
              async: false, // 是否异步
              processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
              contentType: false,
              success:function(data){
                  //alert("ajax success");
                  //stream.getTracks()[0].stop();//结束关闭流
                  //location.href=data;
                  res = data;
                  console.log("ajax "+res);
              },
              error:function(e){
                  //alert("识别失败");
                  //stream.getTracks()[0].stop();//结束关闭流
                  //alert("ajax error")
                  res = "error";
              }
          });
          console.log("res "+res);
          return res;

      }

  </script>

  <script>
      var mySwiper = new Swiper ('.swiper', {
          direction: 'horizontal', // 垂直切换选项
          loop: true, // 循环模式选项
          autoplay: {
              delay: 2000,//1秒切换一次
          },
          // 如果需要分页器
          pagination: {
              el: '.swiper-pagination',
          },

          // 如果需要前进后退按钮
          navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
          },

          // 如果需要滚动条
          scrollbar: {
              el: '.swiper-scrollbar',
          },
      })
  </script>
  <style>
      .swiper {
          width: 100%;
          height: 500px;
      }
  </style>
  <script>

      //owl carousel

      $(document).ready(function() {
          $("#owl-demo").owlCarousel({
              navigation : true,
              slideSpeed : 300,
              paginationSpeed : 400,
              singleItem : true

          });
      });

      //custom select box

      $(function(){
          $('select.styled').customSelect();
      });

  </script>

  </body>
</html>
